<template>
  <div class="w-full h-full">
    <div class="w-full h-full ">
      <div
        class="w-full h-full flex flex-row justify-between"
        style=" justify-content: center !important;"
      >
        <div class="w-1/2 h-full flex flex-col items-center">
          <div
            ref="pieBarRight"
            class="w-5/6 h-5/6"
          />
          <p
            class="pt-2 text-base"
            style="color: #fff"
          >级别占比</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  barData: {
    type: Array,
    default: () => []
  }
})

onMounted(
  () => {
    initBar()
  }
)

import { onMounted } from 'vue'
import * as echarts from 'echarts'

const pieBarRight = ref(null)

const initBar = () => {
  // 引入图表
  var chartDomL = pieBarRight.value
  var myChartL = echarts.init(chartDomL)
  var options
  const label = [] // 遍历props.bardataL将其username放进来
  props.barData.forEach(item => {
    label.push(item.name)
  })
  options = {
    tooltip: {
      trigger: 'item'
    },
    // backgroundColor: 'rgba(255, 255, 255, 0)',
    legend: {
      type: 'scroll',
      orient: 'horizontal',
      right: -6,
      top: 0,
      data: label,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#ffffff'
      },
      pageTextStyle: {
        color: '#ffffff'
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '56%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'left',
        },
        labelLine: {
          show: false
        },
        data: props.barData
      }
    ]
  }
  options && myChartL.setOption(options)
}

// const initBar = () => {
//   // 引入图表
//   var chartDomR = document.getElementById('pieBarRight')
//   var myChartR = echarts.init(chartDomR)
//   var options
//
//   options = {
//     tooltip: {
//       trigger: 'item'
//     },
//     legend: {
//       orient: 'horizontal',
//       top: '0%',
//       left: 'center',
//       itemWidth: 10, // 设置大小
//       itemHeight: 10,
//       textStyle: {
//         color: '#ffffff'
//       },
//     },
//     series: [
//       {
//         name: 'Access From',
//         type: 'pie',
//         radius: ['40%', '70%'],
//         center: ['50%', '56%'],
//         avoidLabelOverlap: false,
//         label: {
//           show: false,
//           position: 'center'
//         },
//         emphasis: {
//           label: {
//             show: true,
//             fontSize: 12,
//             fontWeight: 'bold'
//           }
//         },
//         labelLine: {
//           show: false
//         },
//         data: props.barDataR
//       }
//     ]
//   }
//   options && myChartR.setOption(options)
// }

</script>

<style scoped lang="scss"></style>
